<template>
  <!--电量仪表盘-->
  <div id="energy-dashboard" style="width: 100%; height: 24vh; margin: 0 auto;"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "EnergyDashboard",
  methods: {
    initEcharts() {
      let myChart = echarts.init(document.getElementById("energy-dashboard"))

      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      // 电量
      let energyData = 0.89

      let option = {
        title: {
          text: '电量',
          textStyle: {
            align: 'center',
            color: '#dcdfe0',
            fontSize: 16,
          },
          bottom: '12%',
          left: 'center',
        },
        tooltip: {
          formatter: "{b}{c}"
        },
        series: [
            // 指针中心圆
          {
            tooltip: {
              show: false
            },
            "name": 'wrap',
            "type": 'pie',
            "hoverAnimation": false,
            "legendHoverLink": false,
            center: ['50%', '60%'],
            "radius": ['0%', '7%'],
            "z": 5,
            "label": {
              "normal": {
                "show": false,
                "position": 'center'
              },
              "emphasis": {
                "show": false
              }
            },
            "labelLine": {
              "normal": {
                "show": false
              }
            },
            "data": [{
              "value": 100,
              itemStyle: {
                normal: {
                  color: "#072B79"
                },
                emphasis: {
                  color: "#072B79"
                }
              }
            }]
          },
            // 指针
          {
            tooltip: {
              show: false
            },
            "name": 'wrap',
            "type": 'pie',
            "hoverAnimation": false,
            "legendHoverLink": false,
            center: ['50%', '60%'],
            "radius": ['6%', '8%'],
            "z": 5,
            "label": {
              "normal": {
                "show": false,
                "position": 'center'
              },
              "emphasis": {
                "show": false
              }
            },
            "labelLine": {
              "normal": {
                "show": false
              }
            },
            "data": [{
              "value": 100,
              itemStyle: {
                normal: {
                  color: "#24D8E7"
                },
                emphasis: {
                  color: "#24D8E7"
                }
              }
            }]
          },
            // 外圈刻度
          {
            tooltip: {
              show: false
            },
            name: '刻度',
            type: 'gauge',
            radius: '100%',
            z: 1,
            min: 0,
            max: 1,
            center: ['50%', '60%'],
            splitNumber: 5, //刻度数量
            startAngle: 180,
            endAngle: 0,
            axisLine: {
              show: true,
              lineStyle: {
                width: 5,
                color: [
                  [0.12, '#E71A6D'],
                  [0.35, '#F88168'],
                  [0.63, '#FBF76B'],
                  [0.8, '#7AD4DF'],
                  [1, '#70C27E'],
                ]
              }
            }, //仪表盘轴线
            axisLabel: {
              show: false
            }, //刻度标签。
            axisTick: {
              show: true,
              lineStyle: {
                color: 'auto',
                width: 0
              },
              length: -15
            }, //刻度样式
            splitLine: {
              show: true,
              length: 0,
              lineStyle: {
                color: 'auto',
                width: 2
              }
            }, //分隔线样式
            detail: {
              show: false
            },
            pointer: {
              show: false
            }
          },
            // 内圈刻度
          {
            type: 'gauge',
            radius: '100%',
            min: 0,
            max: 1,
            center: ['50%', '60%'],
            data: [{
              value: energyData,
            }],
            splitNumber: 12, //刻度数量
            startAngle: 180,
            endAngle: 0,
            z: 5,
            axisLine: {
              show: true,
              lineStyle: {
                width: 0,
                color: [
                  [0.12, '#E71A6D'],
                  [0.35, '#F88168'],
                  [0.63, '#FBF76B'],
                  [0.8, '#7AD4DF'],
                  [1, '#70C27E'],
                ]
              }
            }, //仪表盘轴线
            axisLabel: {
              show: true,
              color: '#fff',
              fontSize: 20,
              distance: -70,
              formatter: function (params) {
                let value = params.toFixed(2)

                if (value === 0.00) {
                  return '危'
                } else if (value === 0.25) {
                  return '差'
                } else if (value === 0.50) {
                  return '中'
                } else if (value === 0.75) {
                  return '良'
                } else if (value === 1.00) {
                  return '优'
                } else {
                  return ''
                }
              }
            }, //刻度标签。
            axisTick: {
              splitNumber: 10,
              show: true,
              lineStyle: {
                color: 'auto',
                width: 2
              },
              length: 20,
            }, //刻度样式
            splitLine: {
              show: true,
              length: 25,
              lineStyle: {
                color: 'auto',
                width: 5
              }
            }, //分隔线样式

            itemStyle: {
              "normal": {
                "color": "#24D8E7" //指针颜色
              }
            },
            pointer: {
              width: 10,
              length: '80%'
            },
            detail: {
              formatter: function (params) {
                return (params * 100).toFixed(0) + '%'
              },
              fontSize: 20,
              color: "#fff",
              offsetCenter: ['0%', '-35%']
            },
            title: {
              offsetCenter: ['0', '-60%'],
              fontSize: 40,
              color: "#fff",
              show: true
            },
          }]
      }

      myChart.setOption(option)
    }
  },

  mounted() {
    this.initEcharts()
  }
}
</script>

<style scoped>

</style>
